<template>
  <div>
    <img class="logo" src="../assets/logo.svg" alt="">

    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>

      <van-field name="type" label="类型">
        <template #input>
          <van-radio-group v-model="type" direction="horizontal">
            <van-radio name="老师">老师</van-radio>
            <van-radio name="学生">学生</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped>
.logo {
  width: 200px;
  height: 200px;
  display: block;
  margin: auto;
}
</style>

<script setup>

import { ref } from 'vue';
import { useRouter } from 'vue-router'
import useUser from '@/stores/useUser'

const user = useUser()
const router = useRouter()
const username = ref('');
const password = ref('');
const type = ref('学生');
const onSubmit = (values) => {
  
  console.log('submit', values);
  user.setUser({
    name: username.value,
    type: type.value
  })
  router.push('/')

};
</script>
